<template>
	<view class="padding-lg text-df">
		<view class="flex-row">
			<view class="flex-column-bc" style="">
				<uni-icons type="smallcircle-filled" color="#3c9cff" size="14"></uni-icons>
				<view v-if="my_task.length>0" style="border-right: 1px solid #3c9cff; height: 100%;"></view>
			</view>
			<view class="margin-left-sm">
				<view> {{detail.createTime}}</view>
				<view class="margin-top-sm flex-row">
					<view style="width: 150rpx;">发布者：</view>
					<view> {{detail.createBy}}</view>
				</view>
				<view class="margin-top-sm flex-row">
					<view style="width: 150rpx;">地址：</view>
					<view> {{detail.location}}</view>
				</view>
				<view class="margin-top-sm flex-row">
					<view style="width: 150rpx;">链接：</view>
					<view @click="getDetail(detail.fullAddress)"> {{detail.fullAddress}}</view>
				</view>
				<view class="margin-top-sm flex-row">
					<view style="width: 150rpx;" >意见内容：</view>
					<view style="width: 65%;height:100px;overflow-y: scroll;" @click="getDetail(detail.content)"> {{detail.content}}</view>
				</view>
				<view class="margin-top-sm flex-row">
					<view style="width: 280rpx;">已完成人数/总人数：</view>
					<view style="">{{detail.processed}} / {{detail.totalCount}}</view>
				</view>
				<view class="margin-tb-sm">图片：</view>
				<image :src="detail.taskImg" style="width: 150rpx; height: 150rpx;" mode="aspectFill"
					class="margin-right-sm margin-top-sm">
				</image>
			</view>
		</view>


		<view class="flex-row margin-top-xl" v-if="my_task.length>0">
			<view class="flex-column-bc" style="">
				<uni-icons type="smallcircle-filled" color="#3c9cff" size="14"></uni-icons>
				<view style="border-right: 1px solid #3c9cff; height: 100%;"></view>
			</view>
			<view class="margin-left-sm">
				<view> {{my_task[0].createTime}}</view>
				<view class="margin-top-sm flex-row">
					<view style="width: 150rpx;">发布者：</view>
					<view> {{my_task[0].processedBy}}</view>
				</view>
				<view class="margin-top-sm flex-row">
					<view style="width: 150rpx;">发布者：</view>
					<view> {{my_task[0].telPhone}}</view>
				</view>
				<view class="margin-top-sm flex-row">
					<view style="width: 150rpx;">意见内容：</view>
					<view style="width: 65%;height:100px;overflow-y: scroll;"> {{my_task[0].content}}</view>
				</view>
				<view class="margin-top-sm flex-row">
					<view style="width: 280rpx;">任务状态：</view>
					<view v-if="my_task[0]=='0'" class="text-red">待处理</view>
					<view v-if="my_task[0]=='1'" class="text-low">已完成</view>
				</view>
				<view class="margin-tb-sm">图片：</view>
				<image :src="my_task[0].processedImg" style="width: 150rpx; height: 150rpx;" mode="aspectFill"
					class="margin-right-sm margin-top-sm">
				</image>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getTaskInfo
	} from '../../../api/task'

	export default {
		data() {
			return {
				detail: {
					"location": "受到广泛",
					"fullAddress": "是德国",
					"content": "第三方公司的股份",
					"taskImg": "https://xtianchuang.com/tc/File/2024-04-15/78a8c07f-6cfc-45eb-a9b6-3c60a8f3ccac.jpeg",
					"createTime": "2024-04-15 10:21:04",
					"createBy": "彭志兵",
					"processed": 9,
					"totalCount": 9,
					"taskAllocations": [{
						"id": 66,
						"telPhone": "13979900217",
						"processedBy": "二级网格员(峡山口街道，肖璐)",
						"status": "1",
						"content": "cscs",
						"taskId": 10,
						"processedImg": "cscsc"
					}]
				},
				phone: '',
				my_task: []
			}
		},
		onLoad(options) {
			this.phone = uni.getStorageSync('phone')
			console.log(this.phone)
			getTaskInfo(options.id).then(res => {
				// console.log(JSON.stringify(res))
				this.detail = res.data
				console.log(this.detail)
				this.my_task = this.detail.taskAllocations.filter(item =>
					item.telPhone === this.phone)
			})
		},
		methods: {
			// 复制粘贴
			getDetail(info) {
				uni.showModal({
				    content: info,//模板中提示的内容
				    confirmText:'复制内容',
				    success:(res) => {//点击复制内容的后调函数
						if(res.confirm) {
							let result
							// #ifndef H5
							//uni.setClipboardData方法就是讲内容复制到粘贴板
							uni.setClipboardData({
								data: info,//要被复制的内容
								success:() => {//复制成功的回调函数
									uni.showToast({//提示
										title:'复制成功' 
									})
								}
							});
							// #endif
							
							 // #ifdef H5 
								let textarea = document.createElement("textarea")
								textarea.value = info
								textarea.readOnly = "readOnly"
								document.body.appendChild(textarea)
								textarea.select() // 选中文本内容
								textarea.setSelectionRange(0, info.length) 
								uni.showToast({//提示
									title:'复制成功' 
								})
								result = document.execCommand("copy") 
								textarea.remove()    
							// #endif
						} else {
							console.log('取消')
						}
				    }
				});
			},
			getDate() {}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
</style>